
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>腾讯游戏</title>
<style type="text/css">
*{margin:0;padding:0}
body{font:normal 12px Tahoma, "simsun"}
.spr{background:url(img/gamearea.png) no-repeat}
.box{width:621px}
.boxtop{display:inline-block;height:11px;overflow:hidden;background-position:0 0;padding-left:7px}
.boxtop span{width:613px;display:inline-block;height:11px;overflow:hidden;background-position:100% 0}
.boxmain{float:left;background-position:0 bottom;padding-left:8px}
.inner{float:left;background-position:100% bottom;overflow:hidden;padding:0 8px 7px 0;_zoom:1;_padding-right:9px}
.lst{width:102px;float:left;margin:0 -1px 0 0}
.mmo{width:304px}
.ath{width:203px}
.name{height:33px;line-height:33px;background-position:0 -13px;font-size:12px;color:#0096D0;text-indent:8px;border:1px solid #d6d6d6;border-top:none;border-left:none}
.amount{font-size:9px;color:#BBBFCB;padding:0 5px}
.lnk{display:block;width:85px;height:27px;padding:0 8px;line-height:27px;background-position:0 -19px;color:#464646;text-decoration:none;border:1px solid #d6d6d6;border-top:none;border-left:none;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.lnk:hover{color:#0896D4}
.ico{display:block;width:10px;height:27px;overflow:hidden;text-indent:500px;float:right}
.hot{background-position:0 -47px}
.new{background-position:0 -127px}
.more{background-position:0 -164px;float:left}
.game_pop{width:622px}
</style>
</head>
<body>
	<div id="box_top">dfdfdf</div>
	<div id="game_area">hahahahaha</div>
</body>
<script type="text/html" id="box_top_tpl">
	<div class="boxtop spr"><span class="spr" style="width:${allCols.width}px"></span></div>
</script>
<script type="text/html" id="game_area_tpl">
		<div class="boxmain spr">
			<div class="inner spr">
				{for sub_list in gamelist}
					{if sub_list.onlineGameNum > 0}
					{if sub_list.colsNum == 3}
					<div  class="lst mmo">
					{elseif sub_list.colsNum == 2}
					<div class="lst ath">
					{else}
					<div class="lst">
					{/if}
						<h2 class="name spr">
							${sub_list.typeName}<span class="amount">(${sub_list.onlineGameNum})</span>
						</h2>
						<div class="lst">
							{var i=1}
							{for game_info in sub_list.games}
							{if game_info.online == 1}
							<a class="lnk spr" title="${game_info.appName}" target="_blank" href="//daoju.qq.com/${game_info.busId}/"/>
							{if game_info.isHot == 1}
							<span class="ico hot spr">hot</span>
							{/if}
							${game_info.appName}</a>
							{if i%7 == 0}
						</div>
						<div class="lst">
							{/if}
							{var i=i+1}
							{/if}
							{/for}
						</div>
					</div>
					{/if}
				{/for}
		    </div>
		</div>
</script>
<script type="text/javascript" charset="utf-8"	src="js/jquery.min.js"></script>
<script src="js/milo.js" type="text/javascript"></script>
<script type="application/javascript">
	document.domain="qq.com";
	// parent.document.getElementById("game_area_list").style.width=(Math.ceil(sub_list.games.length/7)*102+4+8)+'px';
	// parent.document.getElementById("game_area_list").style.height="500px";
	milo.ready(function() {
		milo.loader.loadScript("js/gamelist.js", function () {
			var game_area_list = [];
			$.each(gamelist_mall, function (index1, game) {
				var hasType=false
				$.each(game_area_list, function (index2, type) {
					if (game.gameTypeName == type.typeName) {
						hasType=true;
						type.games.push(game);
						if(game.online==1)  type.onlineGameNum++;
					}
				})
				if(hasType===false){
					var item={typeName: game.gameTypeName, games: [],onlineGameNum:0,colsNum:0};
					if(game.online==1)  item.onlineGameNum++;
					item.games.push(game);
					game_area_list.push(item)
				}
			});
			let allCols={total:0};
			$.each(game_area_list,function (index,value) {
				value.colsNum=Math.ceil(value.onlineGameNum/7);
				allCols.total+=value.colsNum;
			});
			console.log(game_area_list);
			need(["util.template"], function (template) {
				allCols.width=allCols.total*102+4;
				var t = template.parseDOMTemplate("game_area_tpl").process(game_area_list, "gamelist");
				var temp = template.parseDOMTemplate("box_top_tpl").process(allCols, "allCols");
				g("box_top").innerHTML=temp;
				g("game_area").innerHTML=t;
			});
		});
	});

</script>
</html>
<!--[if !IE]>|xGv00|fcc943774e674440c399c7cfc3529589<![endif]-->